<template>
	<view class="content">
		<view class="a">
			<view>福&nbsp;&nbsp;利&nbsp;&nbsp;抽&nbsp;&nbsp;奖</view>
		 <!-- <view class="a_one"></view> -->
		
			<view class="a_two">已有{{count}}人参与此活动</view>
			<view class="a_two">您还有<span>{{infor.draw_times||0}}</span>次免费抽奖机会</view>
		<view class="a_two"> 该程序抽奖活动仅提供客户测试使用，礼品不能进行兑换</view>
		</view>
		<view>
			<ljs-turntable :infors="infor" v-if="list.length>2" :show="ljs_turntable_show" @getPrize="getPrize"
				@turntableState="turntableState" :list="list" />
		</view>
		<view class="bb">
			<view class="b" @click="my_prize">我的奖品</view>
			<view class="b_one" @click="content">
				奖项内容</view>
		</view>
		<u-popup :show="show==true" :round="10" mode="center" @close="close" @open="open">
			<view style="height: 550rpx; width:600rpx;overflow: auto;">
				<view class="reward_list">
					<p class="p">奖项内容</p>
					<p class="p1" v-for="(item,index) in list" :key="index">{{item.name}}:{{item.reward||'奖项无'}}</p>

				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ljs_turntable_show: true,
				list: [],
				infor: {},
				show: false,
				count: 0,
			}
		},
		created() {
			this.get_data()
		},
		onShow() {
			this.get_infor()
		},
		onLoad() {
			// 单份最大：不超过18
			// 最大值：共72分，
			// 每份5度
			
			this.get_count()

		},
		methods: {

			get_data() {
				let that = this
				this.$model.get("user/common/get_TurntableActive").then(res => {
					if (res.code == 200) {
						that.list = res.data
					}
				})
			},
			get_infor() {
				let that = this
				this.$model.get("user/get_infor").then(res => {
					if (res.code == 200) {
						uni.setStorageSync("infor", res.data)
						that.infor = res.data
					}
				})
			},
			get_count() {
				let that = this
				this.$model.get("user/common/get_prize_users").then(res => {
					if (res.code == 200) {
						that.count = res.data.count
					}
				})
			},
			// 回调，修改转盘的展示状态
			turntableState(val) {

			},
			// 回调，转盘结果
			getPrize(state, id, prizeName) {
				this.get_infor()
				console.log(state, id, prizeName)
			},
			my_prize() {
				uni.navigateTo({
					url: './my_prize'
				})
			},
			content() {
				this.show = true
			},
			close() {
				this.show = false

			},
			open() {

			},
		}
	}
</script>

<style lang="scss" scoped>
	.a {
		z-index: 5;
		position: fixed;
		color: #fff;
		text-align: center;
		width: 750rpx;
		margin-top: 30rpx;
	}

	span {
		font-size: 40rpx;
		color: sandybrown;
	}

	.reward_list {
		height: 520rpx;
		width: 580rpx;
		margin: 10rpx 0 0 10rpx;
		border-radius: 15rpx;
		border: 2px solid darkgoldenrod;
		overflow-y: auto;
	}

	.a_one {
		height: 50rpx;
		width: 400rpx;
		margin-left: 175rpx;
		border-radius: 15rpx;
		background-color: rgba(255, 255, 255, .5);
		color: #fff;
		margin-top: 15rpx;
	}

	.a_two {
		font-size: 25rpx;
		color: #fff;
		text-align: center;
		margin-top: 15rpx;
	}

	.bb {
		z-index: 4;
		position: fixed;
		bottom: 40rpx;
		width: 750rpx;

	}

	.b {
		width: 300rpx;
		background-color: #ffff00;
		height: 70rpx;
		// margin-top: 1000rpx;
		border-radius: 30rpx;
		color: #ff0000;
		text-align: center;
		padding-top: 30rpx;
		float: left;
		margin-left: 20rpx;
	}

	.b_one {
		width: 300rpx;
		background-color: #ffff00;
		height: 70rpx;
		// margin-top: 1000rpx;
		border-radius: 30rpx;
		color: #ff0000;
		text-align: center;
		float: right;
		padding-top: 30rpx;
		margin-right: 20rpx;
	}

	.p {
		font-size: 50rpx;
		color: red;
		text-align: center;
		margin-top: 15rpx;
	}

	.p1 {
		font-size: 40rpx;
		color: red;
		text-align: center;
	}
</style>
